'use client';

import React from 'react';
import { Form, Card, Typography, Row, Col, Divider } from 'antd';
import { FormInstance } from 'antd/es/form';

const { Text } = Typography;

interface MachineTimeFormProps {
  form: FormInstance;
  mode: 'create' | 'edit' | 'view';
  initialValues?: Record<string, unknown>;
  onSubmit?: (values: Record<string, unknown>) => void;
}

const MachineTimeForm: React.FC<MachineTimeFormProps> = ({ 
  form, 
  mode, 
  initialValues = {},
  onSubmit 
}) => {
  const isReadOnly = mode === 'view';

  // 模拟已选时间数据
  const selectedTimes = [
    { date: '2025-03-28', time: '9:00-11:00' },
    { date: '2025-03-29', time: '9:00-11:00' }
  ];

  // 模拟上下机记录数据
  const machineRecords = [
    {
      title: '第一次实验',
      startTime: '2025-03-28 10:30',
      endTime: '2025-03-28 10:30'
    },
    {
      title: '第二次实验',
      startTime: '2025-03-29 10:30',
      endTime: '2025-03-29 10:30'
    }
  ];

  return (
    <Form
      form={form}
      layout="vertical"
      onFinish={onSubmit}
      initialValues={{
        ...initialValues
      }}
      disabled={isReadOnly}
    >
      {/* 已选时间 */}
      <Card title="已选时间" size="small" style={{ marginBottom: 16 }}>
        {selectedTimes.map((timeSlot, index) => (
          <div key={index} style={{ marginBottom: index < selectedTimes.length - 1 ? 8 : 0 }}>
            <Text>{timeSlot.date} {timeSlot.time}</Text>
          </div>
        ))}
      </Card>

      {/* 上下机时间记录 */}
      <Card title="上下机时间" size="small">
        {machineRecords.map((record, index) => (
          <React.Fragment key={index}>
            <div style={{ marginBottom: 16 }}>
              <Text strong>{record.title}</Text>
              <Row gutter={24} style={{ marginTop: 8 }}>
                <Col span={12}>
                  <div>
                    <Text type="secondary">上机时间：</Text>
                    <Text>{record.startTime}</Text>
                  </div>
                </Col>
                <Col span={12}>
                  <div>
                    <Text type="secondary">下机时间：</Text>
                    <Text>{record.endTime}</Text>
                  </div>
                </Col>
              </Row>
            </div>
            {index < machineRecords.length - 1 && <Divider style={{ margin: '12px 0' }} />}
          </React.Fragment>
        ))}
      </Card>
    </Form>
  );
};

export default MachineTimeForm; 